<template>
  <z-container>
    <z-header height="28px">Switch（开关）</z-header>
    <z-main>
      <z-row :gutter="12">
        <z-col :span="3">默认尺寸</z-col>
        <z-col :span="4">
          <z-switch v-model="value1" active-text="按月付费" inactive-text="按年付费">
          </z-switch>
        </z-col>
        <z-col :span="4">
          <z-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费">
          </z-switch>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">小型开关</z-col>
        <z-col :span="4">
          <z-switch small v-model="value3" active-text="按月付费" inactive-text="按年付费">
          </z-switch>
        </z-col>
        <z-col :span="4">
          <z-switch small style="display: block" v-model="value4" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费">
          </z-switch>
        </z-col>
      </z-row>
    </z-main>
  </z-container>

</template>
<script>
export default {
  name: 'cSwitch',
  data() {
    return {
      value1: true,
      value2: true,
      value3: true,
      value4: true
    }
  }
}
</script>